<template>
	<view class="repairSubmit">

		<view class="malfunctionReason">
			选择故障原因
		</view>

		<!-- 选择原因 -->
		<view class="chooseReason">
			<view class="reasonItem" v-for="item in resonlist" :key="item.id">
				<checkbox color="#f5610c"></checkbox>
				<text class="reasonItem-text">{{item.name}}</text>
			</view>

		</view>

		<!-- 上传图片 -->
		<view class="uploadImages">
			<image class="upload-images" src="../../static/images/lrx/icon_camera@3x.png" mode=""></image>
		</view>
		<view class="pickImages">
			<text>拍摄/选择照片</text>
		</view>

		<!-- 补充问题 -->

		<view class="buchongquestion">
			<textarea class="textArea" placeholder="补充说明你遇到的问题,向我们反馈"></textarea>
		</view>
		
		<view class="submit">
			提交
		</view>



	</view>
</template>

<script>
	export default {
		data() {
			return {
				imglist: [], //选择图片后生成的临时地址数组
				imglist00: [],
				resonlist: [{
						id: "1",
						name: "二维码无法识别"
					},
					{
						id: "2",
						name: "车位被占用"
					},
					{
						id: "3",
						name: "位置描述不准确"
					},
					{
						id: "4",
						name: "APP无法停止计费"
					},
					{
						id: "5",
						name: "二维码无法识别"
					}, {
						id: "6",
						name: "充电慢（无反应）"
					}, {
						id: "7",
						name: "充电异常中断"
					},
					{
						id: "8",
						name: "枪头损坏"
					},
					{
						id: "9",
						name: "故障灯亮起"
					},
					{
						id: "10",
						name: "电源指示灯未亮"
					},
					{
						id: "11",
						name: "其他"
					}
				]

			}
		},
		methods: {


		}
	}
</script>

<style scoped lang="scss">
	.repairSubmit {
		background-color: white;
		padding-bottom: 100rpx;

		// 标题
		.malfunctionReason {
			text-align: center;
			height: 150rpx;
			font-size: 40rpx;
			font-weight: 700;
			line-height: 150rpx;
		}

		//选择原因
		.chooseReason {
			display: flex;
			flex-wrap: wrap;
			padding: 30rpx 50rpx;
			justify-content: space-between;

			.reasonItem {
				width: 300rpx;
				margin: 10rpx 0rpx;

				.reasonItem-text {
					font-size: 28rpx;
					margin-left: 10rpx;

				}
			}
		}

// 上传图片
		.uploadImages {
			border: 1px dashed gray;
			width: 280rpx;
			height: 280rpx;
			margin: 30rpx auto;
			text-align: center;

			.upload-images {
				width: 120rpx;
				height: 100rpx;
				margin-top: 90rpx;
			}
		}

		.pickImages {
			text-align: center;
			margin-bottom: 30rpx;
		}



		// 补充问题
		.buchongquestion {
			width: 600rpx;
			height: 260rpx;
			margin: 0px auto;
			border-radius: 30rpx;
			background-color: #f5f5f5;
			padding: 20rpx;

			.textArea {
				width: 100%;
				height: 100%;
			}

		}

.submit{
	border-radius: 80rpx;
	color:white;
	line-height: 80rpx;
	text-align: center;
	width: 600rpx;
	margin: 60rpx auto;
	background-color: #5d5d5d;
}
	}
</style>
